<template>
  <div class="login-box">
    <div class="box">
        <el-form ref="elForm" :model="form" label-width="0px">
            <section class="login-content">
                <div class="left">
                    <div class="left-img">
                        <img src="../../assets/jellyfish.png"/>
                    </div>
                </div>
                <div class="right">
                    <h2 class="right-box">流媒体管理后台</h2>
                    <el-form-item prop="mobile">
                        <el-input autocomplete="on" v-model="form.user" prefix-icon="el-icon-user" placeholder="账号" />
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input @keyup.enter="clickLogin" maxlength="50" autocomplete="on" v-model="form.pwd" placeholder="密码" prefix-icon="el-icon-key" show-password/>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <div class="btn-center">
                            <el-button type="primary"  @click="clickLogin" :loading="loading">登录</el-button>
                        </div>
                    </el-form-item>
                </div>
            
            </section>
        </el-form>   
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive, getCurrentInstance,ref, onMounted } from 'vue';
export default defineComponent({
    name:'Login',
    setup(){
        const setform: any = ref(null);
        const loading = ref(false);
        const instance: any = getCurrentInstance();
        const GL = instance.appContext.config.globalProperties;
        const form = sessionStorage.PW ? JSON.parse(sessionStorage.PW) :
        {
            user:'',
            pwd:''
        }
        const elForm: any = ref(null);
        const errorMsg = ref('');
        const clickLogin = () => {
           loginPost()
        }
        const clearLoading = () => {
            setTimeout(() => {
                loading.value = false
            },500)
        }
        const loginPost = () =>{
            if (form.user.trim() === '') {
                GL.$message.error('输入的账号不能为空');
            } else if(form.user.trim() === '') {
                GL.$message.error('输入的密码不能为空');
            }else if(form.user.trim() !== 'admin' || form.user.trim() !== 'admin') {
                GL.$message.error('输入的账号或密码错误');
            } else {
                sessionStorage.setItem('PW', JSON.stringify(form))
                GL.$router.replace({
                    name: 'Home'
                }); 
            }
            clearLoading()
        }
        onMounted(()=>{
            
        })
        return {
            ...reactive({form}),
            loading,
            clickLogin,
            elForm,
            errorMsg
        }
    }
});
</script>


<style lang="scss" scoped>
@import 'index.scss';
</style>